<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SQL解析</title>
  <script type="text/javascript" src="../static/js/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../static/css/style.css">
</head>

<body>
<div class="container">
  <h1 class="row skew-title">  
  <span>S</span><span>Q</span><span>L</span><span>解</span><span>析</span><span>器</span>
  </h1>
</div>

<div class="input-container" id="content">
    <form action="#" onsubmit="return false;" method="post" id="userForm">
      <div class="input-field">
          <input type="text" id="SQL" name="" required="">
          <label>请输入SQL语句</label>
          <span></span>
      </div>
      <input type="submit" value="解析运行" id="Analyze" name="" class="btn">
  </form>
</div>
<div style=position:absolute;left:50%;top:88%>
    <a href=Main.html target=_self class=ambi-light-button>返回主界面</a>
</div>

<div id="box-table-c" style=position:absolute;left:20%;top:25%></div>

<div id="box-table-b" style=position:absolute;left:41.7%;top:18%></div>
</body>

<script type="text/javascript">
    function SQLAnalyze() {
        var SQL = document.getElementById('SQL');
        $.ajax({
            type: "get",
            url: "/SQL/SQLAnalyze",
            data: {
                'SQL':SQL.value
            },
            dataType:"json",
            success: function (data) {
                console.log(data);
                if (data[0]=="") {
                    alert("不存在这条SQL语句或SQL语句无法执行!");
                }else if(data[0]=="true"){
                    alert("SQL解析成功并成功执行!");
                }else{
                    alert("SQL解析成功!");
                    $("#content").empty();
                    var str="";
                    if(data[0].destination!=null){
                        str=+"<table id=\"box-table-a\" summary=\"Logistics Node Information\">" +
                            "      <tr>" +
                            "          <th>订单号</th>" +
                            "          <th>到站时间</th>" +
                            "          <th>目的地</th>" +
                            "          <th>VIP</th>" +
                            "          <th>已送出</th>" +
                            "      </tr>";
                        for(var i=0;i<data.length;i++){
                            str+="<tr><td>" +data[i].orderNumber+"</td><td>"+
                                data[i].arriveTime+"</td><td>"+
                                data[i].destination+"</td><td>"+
                                data[i].isVip+"</td><td>"+
                                data[i].isSend+"</td></tr>";
                        }
                        str+="</table>";
                        $("#box-table-b").html(str);
                    }else{
                        str+="<table id=\"box-table-a\" summary=\"Logistics Node Information\">" +
                            "      <tr>" +
                            "          <th>城市</th>" +
                            "          <th>长沙</th>" +
                            "          <th>成都</th>" +
                            "          <th>重庆</th>" +
                            "          <th>广州</th>" +
                            "          <th>杭州</th>" +
                            "          <th>南京</th>" +
                            "          <th>上海</th>" +
                            "          <th>武汉</th>" +
                            "      </tr>";
                        for(var j=0;j<data.length;j++){
                            str+="<tr><td>" +data[j].cityName+"</td><td>"+
                                data[j].changsha+"</td><td>"+
                                data[j].chengdu+"</td><td>"+
                                data[j].chongqing+"</td><td>"+
                                data[j].guangzhou+"</td><td>"+
                                data[j].hangzhou+"</td><td>"+
                                data[j].nanjing+"</td><td>"+
                                data[j].shanghai+"</td><td>"+
                                data[j].wuhan+"</td></tr>" ;
                        }
                        str+="</table>";
                        $("#box-table-c").html(str);
                    }
                }
            },
            error: function () {
                console.log("SQL解析器异常!");
                alert("服务器异常!");
                location.href="Error.html";
            }
        })
    }
    $("#Analyze").click(function(){
        SQLAnalyze();
    });
</script>
</html>